
// 数据
const obj = {
    message: '获取面板数据成功',
    data: {
        // 数据看板的数据
        overview: {
            salary: 16376,
            student_count: 80,
            age: 24,
            group_count: 8,
        },
        // 全学科薪资走势
        year: [
            { month: '1月', salary: 14800 },
            { month: '2月', salary: 13600 },
            { month: '3月', salary: 21400 },
            { month: '4月', salary: 15100 },
            { month: '5月', salary: 15000 },
            { month: '6月', salary: 17000 },
            { month: '7月', salary: 18700 },
            { month: '8月', salary: 20100 },
            { month: '9月', salary: 12600 },
            { month: '10月', salary: 14300 },
            { month: '11月', salary: 12200 },
            { month: '12月', salary: 19600 },
        ],
        // 籍贯分布
        provinceData: [
            { name: '广西壮族自治区', value: 4 },
            { name: '贵州省', value: 4 },
            { name: '天津', value: 4 },
            { name: '北京', value: 13 },
            { name: '云南省', value: 7 },
            { name: '湖南省', value: 3 },
            { name: '浙江省', value: 1 },
            { name: '河南省', value: 3 },
            { name: '江西省', value: 6 },
            { name: '甘肃省', value: 2 },
            { name: '西藏自治区', value: 1 },
            { name: '安徽省', value: 1 },
            { name: '山西省', value: 1 },
            { name: '黑龙江省', value: 1 },
            { name: '陕西省', value: 4 },
            { name: '福建省', value: 3 },
            { name: '上海', value: 3 },
            { name: '四川省', value: 1 },
            { name: '宁夏回族自治区', value: 2 },
            { name: '辽宁省', value: 2 },
            { name: '广东省', value: 5 },
            { name: '河北省', value: 2 },
            { name: '重庆', value: 1 },
            { name: '江苏省', value: 1 },
            { name: '湖北省', value: 1 },
            { name: '新疆维吾尔自治区', value: 3 },
            { name: '内蒙古自治区', value: 1 },
        ],
    },
}
document.querySelector('[name=salary]').innerHTML = obj.data.overview.salary
document.querySelector('[name=student_count]').innerHTML = obj.data.overview.student_count
document.querySelector('[name=age]').innerHTML = obj.data.overview.age
document.querySelector('[name=group_count]').innerHTML = obj.data.overview.group_count

const monthitem = obj.data.year.map(item => {
    return item.month
})
const monthsalary = obj.data.year.map(item => {
    return item.salary
})


// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('line'))

// 指定图表的配置项和数据
const option = {
    // 提示框组件
    tooltip: {
        show: true,
        trigger: 'axis',
    },
    // 刻度i
    grid: {
        left: '10%',
        top: '20%',
    },
    // 大标题
    title: {
        text: '2021全学科薪资走势',
        left: 10,
        top: 15,
        textStyle: {
            fontSize: 16,
        },
    },
    xAxis: {
        type: 'category',
        data: monthitem,
        axisLine: {
            show: true,
            lineStyle: {
                color: 'green',
                type: 'dashed'
            }
        },
        axisLabel: {
            show: true,
            color: 'red'
        }
    },

    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                type: 'dashed',
                color: ['#ccc']
            }
        }
    },
    series: [
        {
            data: monthsalary,
            type: 'line',
            smooth: true,
            symbol: 'emptyCircle',
            symbolSize: 10,
            lineStyle: {
                width: 5,
            },
            // 折线颜色
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#4C99EE', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#5d75f0', // 100% 处的颜色
                        },
                    ],
                },
            ],
            // 区域颜色
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#4C99EE', // 0% 处的颜色
                        },
                        {
                            offset: 0.8,
                            color: 'rgba(255,255,255,0.1)', // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: 'rgba(255,255,255,0)', // 100% 处的颜色
                        },
                    ],
                },
            },
        },
    ],
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)

const initMapChart = () => {
    const myEchart = echarts.init(document.querySelector('#map'))

    const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
    ]

    let option = {
        title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [
            {
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,
            },
        ],
    }

    myEchart.setOption(option)
    const province = obj.data.provinceData
    province.forEach(item => {
        const r = item.name
        const e = item.value
        dataList.forEach(item => {
            // 截取字符串前两位
            if (item.name.substring(0,2) === r.substring(0, 2)) {
                item.value = e
            }
        })
    })
    myEchart.setOption(option)
}
initMapChart()
